<template>
    <div id="content">
      <Header></Header>
      <div id="mainCon">
          <!--左边内容开始-->
          <div id="leftCon">
            <!--文章基础信息开始-->
             <div id="baseInfo">
               <h1 class="w h40 bg95 c_grn_119c5b fb f14 lh40 bb87"><img src="static/images/write.png"  class="ml20 mr10 vm"/>发布文章</h1>
               <ul>
                 <li>
                   <span class="h40 lh40 tit"><i class="f14 lh40 fm_songti c_orgRed_ff481d mr5">*</i>文章标题:</span>
                   <p><input type="text" class="w550 h40 lh40" v-model="addData['travelsName']" placeholder="请输入文章标题"></p>
                 </li>
                 <li>
                   <span class="h40 lh40 tit"><i class="f14 lh40 fm_songti c_orgRed_ff481d mr5">*</i>选择地址:</span>
                   <p class="w550">
                     <selectMap @selectMapFun="selectMap" :region="1" @loadFun="loadFun" :default-data="mapDefaultData"></selectMap>
                   </p>
                 </li>
                 <li>
                   <span class="h40 lh40 tit">关联场地:</span>
                   <p class="f12 c40 addIcon h40 lh40 pl40 pr20 b_grn_119c5b br2 pointer addPlaceBtn" @click="changePlaceState">继续添加</p>
                   <a href="javascript:void(0);" v-for="(item, index) in selectPlaceName" class="f12 h40 pl20 pr20 mr20 bg_grn_119c5b br2 fm_songti  lh40 c100 pr hoverbg_org" style="display: inline-block">{{item['name']}}
                     <i class="redCloseX" @click="delPlace(index)"></i>
                   </a>
                 </li>
                 <li class="selectPlaceBox" v-show="placeState">
                      <div class="placeCon">
                        <img  class="pa orgArr_up" src="static/images/org_arrow_up.png" width="28" height="18"/>
                        <selectMap @selectMapFun="selectPlaceMap" :default-data="mapDefaultData"></selectMap>
                        <div class="placeListBox">
                          <el-radio-group v-model="selectPlace" @change="handleSelectPlaceFun">
                            <el-radio v-for="list in placeList" :label="list.id" style="width:145px;margin-right:15px;margin-left:0px;margin-bottom:10px;overflow: hidden" :title="list.placeName">{{list.placeName}}</el-radio>
                          </el-radio-group>
                        </div>
                        <span class="sureBtn pointer" @click="changePlaceState">确定</span>
                      </div>
                 </li>
                 <li>
                   <span class="h40 lh40 tit">关联轨迹:</span>
                   <p class="f12 c40 addIcon h40 lh40 pl40 pr20 b_grn_119c5b br2 pointer addPlaceBtn"  @click="changeGuideState">继续添加</p>
                   <a href="javascript:void(0);" v-for="(item, index) in selectMotionName" class="f12 h40 pl20 pr20 mr20 bg_grn_119c5b br2 fm_songti  lh40 c100 pr hoverbg_org" style="display: inline-block">{{item['name']}}
                     <i class="redCloseX" @click="delMotion(index)"></i>
                   </a>
                 </li>
                 <li class="selectPlaceBox" v-show="guideState">
                   <div class="placeCon">
                     <img  class="pa orgArr_up" src="static/images/org_arrow_up.png" width="28" height="18"/>
                     <div class="placeListBox">
                       <el-radio-group v-model="seleMotionList" @change="handleSelectMotionFun">
                         <el-radio v-for="list in motionList" :label="list.id" style="width:145px;margin-right:5px;margin-left:0px;overflow: hidden;margin-bottom: 10px;" :title="list.motionName">{{list.motionName}}</el-radio>
                       </el-radio-group>
                     </div>
                     <span class="sureBtn pointer" @click="changeGuideState">确定</span>
                   </div>
                 </li>
               </ul>
             </div>
             <!--文章基础信息结束-->
             <!--文章主体内容开始-->
             <div id="conList">
               <transition-group name="conList" tag="div">
                <div class="conItem" v-for="(item, index) in addData['listTravelsResource']" :key="item['sort']">
                  <div class="ItemBox" v-if="item['flag']==0">
                    <textarea name="" id="" class="txtCon" placeholder="请输入文字..." v-model="item['description']"></textarea>
                  </div>
                  <div class="ItemBox" v-else-if="item['flag']==1">
                    <img :src="item['fileName']" alt="" class="uploadPic">
                    <textarea type="text" class="descCon" placeholder="请为图片添加文字描述(200字以内)" maxlength="200" v-model="item['description']"></textarea>
                  </div>
                  <div class="ItemBox"  v-else-if="item['flag']==2">
                    <div class="videoBox">
                      <playVideo :video-i-d="item['fileName']" :auto-play="false"></playVideo>
                    </div>
                    <textarea type="text" class="descCon" placeholder="请为视频添加文字描述(200字以内)" maxlength="200" v-model="item['description']"></textarea>
                  </div>
                  <img src="static/images/deleteItem.png" alt="" class="deleteBtn" @click="deleteItem(index)">
                </div>
               </transition-group>
             </div>
             <!--选择主体内容类型按钮列表-->
             <div id="addBtns">
                <p class="hintTitle fl">
                    点击右侧按钮添加相对应的元素模块
                </p>
                <div class="BtnList fr">
                    <ul>
                      <li @mouseenter="btnEnter" @mouseleave="btnOut" mark='addTxt' @mousedown="addTxt">
                        <img src="static/images/addTxt1.png" alt="">
                        <span>添加文字</span>
                      </li>
                      <li @mouseenter="btnEnter" @mouseleave="btnOut" mark='addPic'>
                        <img src="static/images/addPic1.png" alt="">
                        <span>添加图片</span>
                        <wwUpload class="uploadBtn" @reloadImg="reloadImg" @uploadStateFun="uploadStateFun"></wwUpload>
                      </li>
                      <li @mouseenter="btnEnter" @mouseleave="btnOut" mark='addVideo'>
                        <img src="static/images/addVideo1.png" alt="">
                        <span>添加视频</span>
                        <wwUpload class="uploadBtn" @reloadImg = "reloadVideo" @uploadStateFun="uploadStateFun"></wwUpload>
                      </li>
                    </ul>
                </div>
             </div>
             <!--文章主体内容结束-->
          </div>
          <!--左边内容结束-->
          <!--右边内容开始-->
          <div id="rightCon" ref="iconBox">
            <h1 class="w h40 bg95 c_grn_119c5b fb f14 lh40 bb87 rightTitle "><img src="static/images/write.png"  class="ml20 mr10 vm"/>发布文章</h1>
            <div class="nextBox">
              <p class="nextBtn" @click="changCoverImgState">
                下一步
              </p>
            </div>
            <div id="changePositionBox" v-show="addData['listTravelsResource'].length>0">
              <span class="PosTit">调整顺序</span>
              <p class="PosDes">
                可以让您快速的对文字、图片、视频进行排序
              </p>
              <div class="iconList" ref="iconPicList">
                  <div>
                    <draggable v-model="addData['listTravelsResource']" element="ul">
                      <transition-group name="iconList">
                        <li v-for="(item, index) in addData['listTravelsResource']" :key = "item['sort']">
                          <div v-if="item['flag']==0">
                            <p class="someTxtMark">{{limitWorld(item['description'],5,'...')}}</p>
                            <img src="static/images/txt.png" alt="" width="135" height="135">
                            <span class="iconIndex">{{index+1}}</span>
                            <img src="static/images/deleteItem.png" alt="" class="deleteBtn" @click="deleteItem(index)">
                          </div>
                          <div v-if="item['flag']==1">
                            <img :src="item['fileName']+'?x-oss-process=image/resize,m_fill,h_100,w_100,limit_0'" alt="" width="135" height="135">
                            <span class="iconIndex">{{index+1}}</span>
                            <img src="static/images/deleteItem.png" alt="" class="deleteBtn" @click="deleteItem(index)">
                          </div>
                          <div v-if="item['flag']==2">
                            <img :src="item['thumFileName']+'?x-oss-process=image/resize,m_fill,h_100,w_100,limit_0'" alt="" width="135" height="135">
                            <span class="iconIndex">{{index+1}}</span>
                            <img src="static/images/deleteItem.png" alt="" class="deleteBtn" @click="deleteItem(index)">
                            <p class="playBtn"></p>
                          </div>
                        </li>
                      </transition-group>
                    </draggable>
                  </div>
              </div>
            </div>
          </div>
          <!--右边内容结束-->
          <!--选择视频封面图开始-->
          <div id="coverImgBox" v-show="coverImgState">
              <div id="coverImgCon">
                  <p>
                    <span>选择封面</span>
                    <span id="coverImgClose" @click="changCoverImgState">
                      <img src="static/images/closeX-15.png" alt="">
                    </span>
                  </p>
                  <div id="coverImg">
                    <img :src="selectedCover['fileName']+'?x-oss-process=image/resize,m_fill,h_300,w_500,limit_0'" alt="" v-if="coverList.length>=1">
                    <p v-else>
                      暂无封面图
                    </p>
                  </div>
                  <div id="selectBox">
                      <span>请上传或选择封面图</span>
                      <p>封面图请上传900*1200或1200*900像素的图片，超过尺寸则会导致图片呗裁剪，影响展示效果</p>
                      <div class="ImgList">
                        <p  class="fl mr30 pointer uploadBtnBox">
                          <img src="static/images/uploadPic.png" alt="">
                          <wwUpload class="uploadBtn" @reloadImg="reloadCover" @uploadStateFun="uploadStateFun"></wwUpload>
                        </p>
                        <div class="fl coverImgList" ref="coverImgList">
                          <ul>
                            <li v-for="(item, index) in coverList" :class="(index===selectedIndex)?'on':''" @click="selectCover(index)">
                              <img :src="item['fileName']+'?x-oss-process=image/resize,m_fill,h_100,w_100,limit_0'" alt="" width="116" height="116">
                            </li>
                          </ul>
                        </div>
                      </div>
                  </div>
                  <span class="submitBtn" @click="subAllData">发布</span>
              </div>
          </div>
          <!--选择视频封面图结束-->
      </div>
      <Footer></Footer>
      <loading v-show="loadState"></loading>
    </div>
</template>

<script>
  import Header from '../../components/header'
  import Footer from '../../components/footer'
  import Utils from "../../assets/Util"
  import selectMap from "../../components/selectMap"
  import wwUpload from '../../components/wwUpload'
  import loading from "../../components/loading"
  import draggable from 'vuedraggable'
  import BScroll from "better-scroll"
  import playVideo from "../../components/playVideo"
  export default {
    name: 'createTraveCircle',
    components:{
      Header,
      Footer,
      selectMap,
      wwUpload,
      loading,
      draggable,
      playVideo
    },
    mounted(){
      this.getEditStatus();
      // this.onWindowScroll();
      this.getMotionList();
      this.coverScroll();
      // this.iconScroll();
    },
    data(){
      return {
          loadState:true,
          placeState:false,
          guideState:false,
          coverImgState:false,
          motionList:[],
          seleMotionList:[],
          selectMotionName:[],
          itemId:0,
          addData:{
            "userID": "",
            "placeIDs": "",
            "travelsName": "",
            "coverImgUrl": "",
            "listTravelsResource": [],
            "summarize": "",
            "provinceID": 0,
            "cityID": 0,
            "regionID": 0,
            "address": "",
            "token": "",
            "journalType": 1,
            "motionIDs": "",
            "secretLevel": ""
          },
          placeList:[],
          selectPlace:[],
          selectPlaceName:[],
          getPlaceData:{
            provinceID:0,
            cityID:0,
            regionID:0,
            pageIndex: 0,
            pageSize: 20
          },
          coverList:[],
          iconScrollObj:null,
          selectedCover:{},
          selectedIndex:0,
          mapDefaultData:{
            province:"",
            city:"",
            region:""
          }
      }
    },
    methods:{
      // 监听页面滚动
      onWindowScroll(){
        let iconBox = this.$refs.iconBox;
        let iconOffsetTop = iconBox.offsetTop;
        let iconOffsetLet = iconBox.offsetLeft;
        window.addEventListener("scroll", function(e){
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            if (scrollTop >= iconOffsetTop){
                iconBox.style.position = "absolute";
                iconBox.style.right = "0px";
                iconBox.style.left = iconOffsetLet + "px";
                iconBox.style.top = scrollTop + "px";
            }else{
                iconBox.style.position = "";
            }
        });
      },
      // 鼠标移入移出按钮效果
      btnEnter(e){
        let _this = e.target;
        let mark = _this.getAttribute("mark");
        _this.getElementsByTagName("img")[0].setAttribute("src", "static/images/" + mark + "2.png");
      },
      btnOut(e){
        let _this = e.target;
        let mark = _this.getAttribute("mark");
        _this.getElementsByTagName("img")[0].setAttribute("src", "static/images/" + mark + "1.png");
      },
      // 添加模块
      addTxt(){
        let txtDataModel = {
          "sort":this.itemId += 1,
          "flag": "0",
          "fileName": "",
          "thumFileName": "",
          "description": "",
          "length": "",
          "imgWidth": "0",
          "imgHeight": "0"
        };
        this.addData.listTravelsResource.push(txtDataModel);
      },
      deleteItem(index){
        this.$confirm('此操作将永久删除该内容, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.addData.listTravelsResource.splice(index, 1);
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {});
      },
      limitWorld(txt, num, mark){
         return Utils.limitworld(txt, num, mark);
      },
      loadFun(){
        this.loadState = false;
      },
      selectMap(value){
        console.log(value);
        switch (value.type) {
          case "province":
            this.addData['provinceID'] = value['provinceID'];
            this.mapDefaultData['province'] = value['name'];
            this.getPlaceData['provinceID'] = value['provinceID'];
            this.getPlaceData['cityID'] = "";
            break;
          case "city":
            this.addData['cityID'] = value['cityID'];
            this.mapDefaultData['city'] = value['name'];
            this.getPlaceData['cityID'] = value['cityID'];
            break;
          case "region":
            this.addData['regionID'] = value['regionID'];
            this.mapDefaultData['region'] = value['name'];
            this.addData['address'] = value['address'];
            break;
        }
        this.$nextTick(() => {
          this.getPlace();
        });
      },
      // 修改场地选择弹出框状态
      changePlaceState(){
        this.placeState = !this.placeState;
      },
      // 删除已选择的场地
      delPlace(index){
        this.selectPlace = [];
        this.selectPlaceName = [];
      },
      // 获取场地
      getPlace(){
        let props = {
          url:'/Place/GetList',
          data:this.getPlaceData,
          sCallBack:res => {
            if(res.data.code === 1){
              this.placeList = res.data.data;
            }else{
              this.$message.error("请求失败");
            }
            this.loadState = false;
          },
          eCallBack:err => {
            console.log(err);
          }
        }
        Utils.myRequest(props);
      },
      // 选择场地地址
      selectPlaceMap(value){
        this.loadState = true;
        switch (value.type) {
          case "province":
            this.getPlaceData['provinceID'] = value['provinceID'];
            this.getPlaceData['cityID'] = "";
            break;
          case "city":
            this.getPlaceData['cityID'] = value['cityID'];
            break;
        }
        this.$nextTick(() => {
          this.getPlace();
        });
      },
      // 选择场地的函数
      handleSelectPlaceFun(value){
        this.addData.placeIDs = value;
        this.selectPlaceName = [];
        let that = this;
        that.placeList.forEach(function (place) {
          if(place.id === value){
            let selectPlace = {
              id:value,
              name:place.placeName
            };
            that.selectPlaceName.push(selectPlace);
          }
        })
      },
      // 改变选择轨迹弹出框的状态
      changeGuideState(){
        this.guideState = !this.guideState;
      },
      // 请求用户的轨迹列表
      getMotionList(){
        let props = {
          url:"/Motion/GetList",
          data:{
            "userID": localStorage.getItem("uId"),
            "pageIndex": 0,
            "pageSize": 20
          },
          sCallBack:res => {
            if(res.data.code === 1){
              this.motionList = res.data.data;
            }
          },
          eCallBack:err => {
            console.log(err);
            this.$message.error("用户的轨迹列表请求失败,请稍后再试");
          }
        }
        Utils.myRequest(props);
      },
      // 选择轨迹触发的函数
      handleSelectMotionFun(value){
        this.addData.motionIDs = value;
        this.selectMotionName = [];
        let that = this;
        that.motionList.forEach(function (motion) {
          if(motion.id === value){
            let selectMotion = {
              id:value,
              name:motion.motionName
            };
            that.selectMotionName.push(selectMotion);
          }
        })
      },
      // 删除已选的轨迹
      delMotion(index){
        this.seleMotionList = [];
        this.selectMotionName = [];
      },
      // 加载图片信息
      reloadImg(data){
        let upInfo = data.files;
        this.loadState = false;
        let Pic = {};
        if(upInfo.flag === 1){
          Pic['fileName'] = upInfo['url'];
          let img = new Image();
          img.src = upInfo['url'];
          img.onload = function(){
            Pic['imgWidth'] = img.width;
            Pic['imgHeight'] = img.height;
          };
          Pic['flag'] = 1;
          Pic['thumFileName'] = "";
          Pic['description'] = "";
          Pic['length'] = 0;
          Pic['sort'] = this.itemId += 1;
        }else{
         this.$message.error("请上传图片");
          return false;
        }
        this.addData.listTravelsResource.push(Pic);
      },
      // 加载视频信息
      reloadVideo(data){
        console.log(data);
        this.loadState = false;
        let Pic = {};
        if(data.flag === "2"){
          let img = new Image();
          img.src = data['thumFileName'];
          img.onload = function(){
            Pic['imgWidth'] = img.width;
            Pic['imgHeight'] = img.height;
          };
          Pic['fileName'] = data['fileName'];
          Pic['flag'] = 2;
          Pic['thumFileName'] = data['thumFileName'];
          Pic['description'] = "";
          Pic['length'] = 0;
          Pic['sort'] = this.itemId += 1;
        }else{
         this.$message.error("请上传视频");
         return false;
        }
        this.addData.listTravelsResource.push(Pic);
        document.getElementById("uploadInfoBox").innerHTML="获取成功";
        document.getElementById("uploadInfoBox").innerHTML="";
      },
      // 上传文件加载
      uploadStateFun(){
        this.loadState = true;
      },
      // 点击下一步
      changCoverImgState(){
        let that = this;
        that.coverList = [];
        this.addData.listTravelsResource.forEach(function (item) {
          if (item.flag == "1"){
            that.coverList.push(item);
          }
        })
        if(this.coverList.length >= 1){
            this.selectedCover = this.coverList[0];
        }
        this.coverImgState = !this.coverImgState;
      },
      // 缩略图滚动
      iconScroll(){
        let iconBox = this.$refs.iconPicList
        this.iconScrollObj = new BScroll(iconBox, {
          scrollY: true,
          click: true,
          mouseWheel:true
        });
      },
      // 选择封面图
      selectCover(index){
        this.selectedCover = this.coverList[index];
        this.selectedIndex = index;
      },
      // 封面列表滚动
      coverScroll(){
        let coverImgBox = this.$refs.coverImgList;
        let coverScroll = new BScroll(coverImgBox, {
          scrollX:true,
          scrollY:false,
          click: true
        });
      },
      // 上传封面图
      reloadCover(data){
        let upInfo = data.files;
        this.loadState = false;
        let Pic = {};
        if(upInfo.flag === 1){
          Pic['fileName'] = upInfo['url'];
          let img = new Image();
          img.src = upInfo['url'];
          img.onload = function(){
            Pic['imgWidth'] = img.width;
            Pic['imgHeight'] = img.height;
          }
          Pic['flag'] = 1;
          Pic['thumFileName'] = "";
          Pic['description'] = "";
          Pic['length'] = 0;
          Pic['id'] = this.itemId += 1;
        }else{
          this.$message.error("请上传图片");
          return false;
        }
        this.coverList.unshift(Pic);
        this.selectedIndex = 0;
        this.selectedCover = Pic;
      },
      // 发布游记文章
      subAllData(){
        let that = this;
        this.addData.coverImgUrl = this.selectedCover['fileName'];
        this.addData.token = localStorage.getItem('token');
        this.addData.userID = localStorage.getItem('uId');
        if(localStorage.getItem('token') === null || localStorage.getItem("token") === "undefined" || localStorage.getItem('token') === undefined || localStorage.getItem('token') === ""){
            this.$message.warning("您还未登录，请先登录");
            return false;
        }
        if (this.addData.travelsName === "" || this.addData.travelsName === null){
          this.$message.warning("请输入游记标题");
          return false;
        }
        if(this.addData.provinceID === 0){
          this.$message.warning("请选择省份");
          return false;
        }
        if (this.addData.cityID === 0){
          this.$message.warning("请选择城市");
          return false;
        }
        if (this.addData.regionID === 0){
          this.$message.warning("请选择区域");
          return false;
        }
        if(this.addData.listTravelsResource.length === 0){
          this.$message.warning("还没有上传文章、图片或视频");
          return false;
        }
        if(this.addData.coverImgUrl === ""){
          this.$message.warning("请上传或选择封面图");
          return false;
        }
        this.loadState = true;
        let subUrl = "";
        if(this.$route.query.id){
          this.addData['travelsID'] = this.$route.query.id;
          subUrl = "/Travels/Update";
        }else{
          subUrl = "/Travels/Add";
        }
        let props = {
          url:subUrl,
          data:this.addData,
          sCallBack:res => {
            if(res.data.code === 1){
              that.$message.success("发布成功");
              setTimeout(() => {
                that.loadState = false;
                that.$router.push({path:'/activityList'})
              }, 1000)
            }else if(res.data.code === 4){
              that.refreshToken(that.subAllData());
            }else{
              that.loadState = false;
              that.$message.warning(res.data.message);
            }
          },
          eCallBack:err => {
            that.loadState = false;
            that.$message.warning(err.data.message);
          }
        }
        Utils.myRequest(props);
      },
      // 刷新token
      refreshToken(callBack){
        let refresh = {
          url:"/user/GetToken",
          data:{
            token:localStorage.getItem('token')
          },
          sCallBack:(res) => {
            localStorage.setItem("token", res.data.data)
            callBack && callBack();
          },
          eCallBack:(err) => {
            console.log(err);
          }
        }
        Utils.myRequest(refresh);
      },
      // 判断是新增还是修改
      getEditStatus(){
        let that = this;
        let id = this.$route.query.id;
        if(id){
            let props = {
              url:"/Travels/GetDetail",
              data:{
                "travelsID": id,
                "userID": localStorage.getItem("uId"),
                "pageIndex": 0,
                "pageSize": 0
              },
              sCallBack:res => {
                if(res.data.code === 1){
                    this.addData.travelsName = res.data.data.travelsName;
                    res.data.data.activityPlaceList.forEach((place) => {
                      let placeObj = {
                        id:place['placeID'],
                        name:place['placeName']
                      }
                      that.selectPlaceName.push(placeObj);
                    });
                    res.data.data.listMotion.forEach((motion) => {
                      let motionObj = {
                        id:motion['894'],
                        name:motion['motionName']
                      }
                      that.selectMotionName.push(motionObj);
                    });
                    res.data.data.listTravelsResource.forEach((resource, index) => {
                        let resourceObj = {
                          "sort":index,
                          "flag": resource['flag'],
                          "fileName": resource['fileName'],
                          "thumFileName": resource['thumFileName'],
                          "description": resource['description'],
                          "length": resource['length'],
                          "imgWidth": resource['imgWidth'],
                          "imgHeight": resource['imgHeight']
                        }
                        this.addData.listTravelsResource.push(resourceObj);
                        this.mapDefaultData.province = res.data.data.provinceName;
                        this.mapDefaultData.city = res.data.data.cityName;
                        this.mapDefaultData.region = res.data.data.regionName;
                        this.addData.provinceID = res.data.data.provinceID;
                        this.addData.cityID = res.data.data.cityID;
                        this.addData.regionID = res.data.data.regionID;
                    });
                    this.itemId = res.data.data.listTravelsResource.length;

                }else{
                  this.$message.error("信息请求出错");
                }
              },
              eCallBack:err => {
                this.$message.error("信息请求失败");
                console.log(err);
              }
            }
            Utils.myRequest(props);
        }
      }
    }
  }
</script>

<style scoped>
  #content{
    background:#F4F4F4;
  }
  #mainCon{
    width:1200px;
    margin:30px auto;
    font-size:14px;
    color:#333;
    overflow: hidden;
    min-height:80vh;
  }
  #leftCon{
    width:885px;
    float: left;
  }
  #rightCon{
    width:300px;
    float: right;
  }
  #baseInfo,#addBtns,#conList .conItem{
    background:#fff;
    width:100%;
    border:1px solid #DEE1E8;
    border-radius:4px;
  }
  #baseInfo ul{
    padding:30px 80px;
  }
  #baseInfo ul li{
    list-style: none;
    margin-bottom:30px;
  }
  #baseInfo ul li::after{
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
  }
  #baseInfo ul li:last-child{
    margin-bottom:0px;
  }
  #baseInfo ul li p{
    display: inline-block;
  }
  #baseInfo ul li .tit{
    display: inline-block;
    margin-right:30px;
    width:100px;
    text-align: right;
  }
  #baseInfo ul li p input{
    border:1px solid #E0E3E9;
    text-indent:15px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
  }
  #baseInfo .placeListBox{
    padding:15px;
  }
  .placeCon{
    width:543px;
    position: relative;
    float:right;
    border:1px solid #F48D54;
    border-radius:2px;
    margin-right:50px;
    padding:15px;
  }
  .sureBtn{
    width:80px;
    display: block;
    text-align: center;
    line-height: 35px;
    background:#119C5B;
    color:#fff;
    border-radius:4px;
    float:right;
    margin-top:15px;
  }
  .addPlaceBtn:hover{
    border:1px solid #f16113;
  }
  #addBtns{
    margin-top:15px;
    height:60px;
  }
  #addBtns .hintTitle{
    line-height: 60px;
    color:#9B9B9B;
    width:40%;
    text-align: center;
  }
  .BtnList{
    width:60%;
  }
  .BtnList ul{
    display: flex;
    justify-content: space-around;
    padding:10px 0px;
  }
  .BtnList ul li{
    font-size: 0;
    width:28%;
    border:1px solid #393939;
    border-radius:3px;
    text-align: center;
    height: 40px;
    cursor: pointer;
    position: relative;
  }
  .BtnList ul li:hover{
    color:#fff;
    background:#119C5B;
    border-color: #119C5B;
  }
  .BtnList ul li span{
    font-size: 14px;
    line-height: 40px;
  }
  .BtnList ul li img{
    width:22px;
    height:22px;
    margin-top: 9px;
    margin-right:15px;
  }
  #conList .conItem{
    background:#fff;
    margin-top:15px;
    text-align: center;
    padding:30px 0px;
    position: relative;
  }
  #conList .conItem .ItemBox{
    width:500px;
    margin:0 auto;
  }
  #conList .conItem .ItemBox .txtCon{
    width:100%;
    height: 300px;
    border:1px solid #E0E3E9;
    border-radius:3px;
    resize:none;
    padding:15px;
  }
  .deleteBtn{
    position:absolute;
    top:0px;
    right:0px;
    cursor:pointer;
  }
  .uploadPic{
    width:100%;
  }
  .descCon{
    width:478px;
    height:45px;
    line-height:40px;
    border:1px solid #E0E3E9;
    border-radius:3px;
    margin-top:10px;
    resize:vertical;
    padding:0px 10px;
  }
  .videoBox{
    position: relative;
    height:250px;
    width:500px;
  }
  .conList-enter-active, .conList-leave-active {
    transition: all 1s;
  }
  .conList-enter, .conList-leave-to
    /* .list-leave-active for below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
  }
  /*右边样式*/
  .rightTitle,.nextBox,#changePositionBox{
    border:1px solid #E0E3E9;
    width:297px;
  }
  .nextBox{
    background: #fff;
    padding:15px;
    margin:15px 0px;
    font-size: 0;
    border-radius: 0px 0px 4px 4px;
  }
  .nextBtn{
    text-align: center;
    line-height: 40px;
    color:#fff;
    background:#119C5B;
    font-size: 14px;
    margin-block-start: 0em;
    margin-block-end: 0em;
    border-radius:4px;
    cursor:pointer;
  }
  #changePositionBox{
    margin-top:15px;
    background:#ffffff;
    border-radius:4px 4px 0px 0px;
    padding:15px 10px;
  }
  #changePositionBox .PosTit{
    font-size:16px;
    line-height:40px;
  }
  #changePositionBox .PosDes{
    font-size: 14px;
    color:#9A9A9A;
    border-bottom:1px solid #DDE0E7;
    padding-bottom:5px;
    text-align: justify;
    margin-bottom:10px;
  }
  .iconList-move {
    transition: transform 0.5s;
  }
  .iconList{
    /*max-height:50vh;*/
    /*overflow: hidden;*/
  }
  .iconList ul{
    overflow: hidden;
    width:285px;
  }
  .iconList ul li{
    width:133px;
    float: left;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    margin-right:8px;
    margin-bottom:8px;
    cursor:move;
  }
  .iconList ul li p.someTxtMark{
    position: absolute;
    top:0px;
    left:0px;
    color:#333;
    padding:5px;
    text-align: center;
    width:100%;
  }
  .iconList ul li .iconIndex{
    width:20px;
    height:20px;
    display:block;
    position: absolute;
    left:0px;
    bottom:0px;
    text-align: center;
    line-height: 20px;
    color:#fff;
    background:#F06113;
  }
  .iconList ul li img{
    border-radius:4px;
  }
  .uploadBtnBox{
    position:relative;
    width:116px;
    height:116px;
    margin-right:30px !important;
  }
  .uploadBtn{
    width:100% !important;
    height:100% !important;
    position: absolute !important;
    top:0px;
    opacity: 0;
  }
  #coverImgBox{
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.6);
    position:fixed;
    top:0px;
    left:0px;
    z-index:1000;
  }
  #coverImgCon{
    width:1200px;
    height:700px;
    background: #fff;
    border-radius:4px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-600px;
    margin-top:-350px;
    padding:20px 30px;
  }
  #coverImgClose{
    float:right;
    cursor: pointer;
  }
  #coverImg{
    width: 500px;
    height:300px;
    background:#F4F4F4;
    display: block;
    margin:10px auto;
  }
  #coverImg p{
    text-align: center;
    line-height:300px;
    color:#9F9F9F;
  }
  #selectBox span{
    font-size:18px;
    color:#333;
    margin:15px 0 5px 0;
    display: block;
  }
  #selectBox p{
    font-size:14px;
    margin:0px 0 15px 0;
    color:#9B9B9B;
  }
  .ImgList{
    width:100%;
    overflow: hidden;
  }
  .ImgList .coverImgList{
    width:990px;
    height:113px;
    border:1px dotted #B0B0B0;
    border-radius:4px;
    padding:5px;
    overflow: hidden;
  }
  .ImgList ul{
    height:100%;
    white-space: nowrap;
    float:left;
  }
  .ImgList ul li{
    display:inline-block;
    margin-right:10px;
    width:100px;
    height:100px;
    overflow: hidden;
    cursor: pointer;
  }
  .ImgList ul li.on{
    border:3px solid #119C5B;
  }
  .ImgList ul li.on img{
    transform: translate(-3px, -3px);
    -webkit-transform: translate(-3px, -3px);
    -o-transform: translate(-3px, -3px);
    -moz-transform: translate(-3px, -3px);
  }
  .submitBtn{
    display:block;
    width:300px;
    height:40px;
    line-height: 40px;
    color:#fff;
    text-align: center;
    background: #119C5B;
    margin:80px auto 0;
    border-radius:4px;
    cursor: pointer;
  }
</style>
